<template>
  <!-- 国家代码 -->
  <div class="nation-code-select">
    <!-- 自定义列 -->
    <a-dropdown
        :disabled="disabled"
      :trigger="['click']"
      :visible="visible"
    >
      <div
        class="select"
        @click="visible=!visible"
      >
        <!-- <img src="@/assets/images/nation_code_phone.png"> -->
        <a-icon
          :style="{ color: 'rgba(0,0,0,.25)' }"
          type="mobile"
        />
        <span>{{value}}</span>
        <img src="@/assets/images/xjt.png">
      </div>
      <div
        slot="overlay"
        ref="contains"
      >
        <!-- 禁止事件下传，这样点击自定义的下拉菜单就不会收起了，注意宽高完全覆盖好 -->
        <div @click.stop>
          <!-- 菜单内容 -->
          <div class="content-select">
            <div class="top-box">
              <ul>
                <li
                  :class="item==selectEn?'li-active ':''"
                  v-for="item,i in list "
                  :key="i"
                  @click="changeEn(item)"
                >{{item}}</li>
              </ul>
              <div class="select-in">
                <span class="hint">{{selectEn}}</span>
                <span class="lene"></span>
              </div>
            </div>
            <div class="select-option">
              <ul>
                <li
                  v-for="item in listSelet "
                  :key="item.id"
                  @click="change(item)"
                  :class="val == item.id ?'li-active':''"
                > <span
                    v-if="val == item.id"
                    class="active"
                  ></span><span>{{item.name}}</span> <span>{{item.code}}</span> </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </a-dropdown>
  </div>
</template>

<script>
import { queryFirstPinyin, queryPageList } from "@/api/sysCountry";
export default {
  props: {
    value: {
      // type: Number,
      default: "+86",
    },
    disabled:{
      type:Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      list: [],
      selectEn: {},
      listSelet: [],
    };
  },
  created() {
    this.queryFirstPinyinFn();
  },
  computed: {
    val() {
      for (let index = 0; index < this.listSelet.length; index++) {
        if (this.listSelet[index].code === this.value) {
          return this.listSelet[index].id;
        }
      }
    },
  },
  mounted() {
    // 监听点击事件，不在当前 contains 元素就关闭
    document.addEventListener("click", (e) => {
      if (!this.$el.contains(e.target)) this.visible = false;
    });
  },
  destroyed() {
    document.removeEventListener('click', e => this.beforeunloadFn(e))
  },
  methods: {
    changeEn(item) {
      this.selectEn = item;
      this.queryPageListFn();
    },
    change(item) {
      console.log(item.code);
      this.$emit("input", item.code);
      this.$emit("change", item);
      this.visible = false;
    },
    // 获取首字母
    async queryFirstPinyinFn() {
      let res = await queryFirstPinyin();
      if (res.code == 0) {
        this.list = res.data;
        this.selectEn = res.data[0];
        this.queryPageListFn(res.data[0]);
      }
    },
    // 获取字母下区号
    async queryPageListFn() {
      let res = await queryPageList({
        firstPinyin: this.selectEn,
        pageNo: 0,
        pageSize: 99999999,
      });
      if (res.code == 0) {
        this.listSelet = res.data.records;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.nation-code-select {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 100%;
  .select {
    width: 100px;
    height: 32px;
    height: 100%;
    width: 100%;
    border: 1px solid #dce2ee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 16px;
    // border-radius: 5px;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
  }
}
</style>

<style lang="less">
.content-select {
  width: 300px;
  border: 1px solid #dce2ee;
  padding: 8px;
  border-radius: 5px;
  margin-top: 1px;
  position: absolute;
  left: 0;
  top: 2px;
  z-index: 100;
  background: #fff;
  transition: all 5s;
  .top-box {
    ul {
      display: flex;
      flex-wrap: wrap;

      li {
        height: 24px;
        padding: 0 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .li-active {
        color: #489cd8;
      }
    }
    .select-in {
      display: flex;
      align-items: center;
      .hint {
        padding: 0 16px 0 5px;
        width: inherit;
        height: 26px;
        line-height: 26px;
        font-size: 14px;
        color: #1b1b1b;
        background-color: #ffffff;
        text-align: left;
      }
      .lene {
        display: inline-block;
        height: 1px;
        flex: 1;
        background: #dce2ee;
      }
    }
  }
  .select-option {
    height: 180px;
    overflow: auto;
    ul {
      li {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
        position: relative;
        cursor: pointer;
        .active {
          display: inline-block;
          width: 40px;
          height: 30px;
          background-image: url(../../assets/images/com_d.png);
          background-position: 16px 10px;
          background-repeat: no-repeat;
          background-size: 15px;
          position: absolute;
          left: 0px;
          top: 0;
        }
      }
      .li-active {
        background-color: #eaf8fe;
      }

      li:hover {
        background-color: #eaf8fe;
      }
    }
  }
}
</style>